<template>
  <div>
    <a-card :bordered="false">
      <s-table
        ref="table"
        :columns="columns"
        :data="loadData"
        :alert="options.alert"
        :rowKey="(record) => record.id"
        :rowSelection="options.rowSelection"
      >
        <template
          slot="operator"
        >
          <a-button
            @click="$refs.addForm.add()"
            icon="plus"
            type="primary"
          >新增相册</a-button>
          <x-down
            style="display:none"
            ref="batchExport"
            @batchExport="batchExport"
          />
        </template>
        <span
          slot="kejian"
          slot-scope="text, record"
        >
          <span>{{record.classId?record.className:'全园可见'}}</span>
        </span>
        <span
          slot="action"
          slot-scope="text, record"
        >
          <a
            @click="showImages(record)"
          >预览图片</a>
          <a-divider
            type="vertical"
          />
          <a
            v-show="queryParam.IsArchived === 'false'"
            @click="$refs.editForm.edit(record)"
          >编辑</a>
          <a-divider
            type="vertical"
            v-show="queryParam.IsArchived === 'false'"
          />
          <a-popconfirm
            v-show="queryParam.IsArchived === 'false'"
            placement="topRight"
            title="确认删除？"
            @confirm="() => singleDelete(record)"
          >
            <a>删除</a>
          </a-popconfirm>
        </span>
      </s-table>
      <add-form
        ref="addForm"
        @ok="handleOk"
      />
      <edit-form
        ref="editForm"
        @ok="handleOk"
      />
    </a-card>
    <a-modal
      :visible="previewVisible"
      :footer="null"
      :width="600"
      @cancel="handlePreviewCancel"
    >
      <img
        class="img-item"
        v-for="(item, index) in imgList"
        :key="index"
        :src="item"
        alt=""
      >
    </a-modal>
  </div>
</template>

<script>
import { STable, XCard, XDown } from '@/components'
import { gardenHouseList } from '@/api/modular/garden/posManage'
import { sysPosPage, sysPosDelete, sysPosExport, getOwnUser, sysPosArchive } from '@/api/modular/garden/classManage'
import { classAlbumPage, albumPreview, classAlbumAdd, classAlbumEdit, classAlbumDelete } from '@/api/modular/garden/classalbum'
import { getGardenHouse} from '@/api/modular/garden/gardenInfo';
import addForm from './addForm'
import editForm from './editForm'

export default {
  components: {
    XDown,
    XCard,
    STable,
    addForm,
    editForm,
  },

  data () {
    return {
      // 查询参数
      queryParam: {
        IsArchived: "false"
      },
      previewVisible: false,
      imgList: [],
      // 表头
      columns: [
        {
          title: '发布人',
          dataIndex: 'createUserName'
        },
        {
          title: '发布时间',
          dataIndex: 'createdTime'
        },
        {
          title: '描述',
          dataIndex: 'describe'
        },
        {
          title: '标签',
          dataIndex: 'tags'
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        let obj = {
          ContentKey: this.queryParam.ContentKey?this.queryParam.ContentKey:null,
          ClassId: this.queryParam.ClassI?this.queryParam.ClassId:null,
          ChildId: this.queryParam.ChildId?this.queryParam.ChildId:null,
        }
        return classAlbumPage(Object.assign(parameter, obj)).then((res) => {
          return res.data
        })
      },
      selectedRowKeys: [],
      selectedRows: [],
      options: {
        alert: { show: true, clear: () => { this.selectedRowKeys = [] } },
        rowSelection: {
          selectedRowKeys: this.selectedRowKeys,
          onChange: this.onSelectChange
        }
      },
      nurseList: [],
      teacherList: [],
      classroom: [],
      gardenHouseInfo: {},
      imgTitle: '',
    }
  },

  created () {
    this.imgTitle = process.env.VUE_APP_API_BASE_URL + '/sysFileInfo/previewImg?id=';
      this.columns.push({
        title: '可见班级',
        width: '120px',
        dataIndex: 'kejian',
        scopedSlots: { customRender: 'kejian' }
      })
      this.columns.push({
        title: '操作',
        width: '240px',
        dataIndex: 'action',
        scopedSlots: { customRender: 'action' }
      })
    this.getUsers();
    this.getgardenHouseList();
    this.getInfos();
  },
  methods: {
    selectChange(val){
      this.$refs.table.refresh(true)
    },
        getInfos(){
            getGardenHouse().then((res) => {
                if(res.code === 200){
                    this.gardenHouseInfo = res.data;
                }
            })
        },

    //获取教师，保育员
    getUsers(){
      //sysPosEdit
      getOwnUser().then((res) => {
          if(res.code === 200){
            this.teacherList = res.data;
            this.nurseList = res.data;
          }
      })
    },
    //获取教室
    getgardenHouseList(){
      //sysPosEdit
      gardenHouseList().then((res) => {
          if(res.code === 200){
            this.classroom = res.data;
          }
      })
    },
    handlePreviewCancel(){
      this.previewVisible = false;
    },
    showImages(record){
      let _imgs = record.images;
      console.log(_imgs);
      this.imgList = _imgs.map(item => {
        return this.imgTitle + item.filedId;
      })
      this.previewVisible = true;
    },

    /**
     * 单个删除
     */
    singleDelete (record) {
      const param = [{ 'id': record.id }]
      this.classAlbumDelete(param)
    },
    /**
     * 批量删除
     */
    batchDelete () {
      const paramIds = this.selectedRowKeys.map((d) => {
        return { 'id': d }
      })
      this.classAlbumDelete(paramIds)
    },
    /**
     * 删除
     */
    classAlbumDelete (param) {
      classAlbumDelete(param).then((res) => {
        if (res.success) {
          this.$message.success('删除成功')
          this.$refs.table.clearRefreshSelected()
        } else {
          this.$message.error('删除失败：' + res.message)
        }
      }).catch((err) => {
        this.$message.error('删除错误：' + err.message)
      })
    },
    /**
     * 批量导出
     */
    batchExport () {
      const paramIds = this.selectedRowKeys.map((d) => {
        return { 'id': d }
      })
      sysPosExport(paramIds).then((res) => {
        this.$refs.batchExport.downloadfile(res)
      })
    },
    handleOk () {
      this.$refs.table.refresh()
    },
    onSelectChange (selectedRowKeys, selectedRows) {
      this.selectedRowKeys = selectedRowKeys
      this.selectedRows = selectedRows
    }
  }

}
</script>

<style lang="less">
.table-operator {
  margin-bottom: 18px;
}
button {
  margin-right: 8px;
}
.img-item{
  width: 160px;
}
</style>
